<template>
  <div class="app-container">

     <el-table v-loading="loading" :data="imgList"> >
       <el-table-column label="图片地址" prop="url"  width="680"/>

       <el-table-column label="操作" align="center"   class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-view"
             @click="handOpenImage(scope.row)"
             v-hasPermi="['job:attendanceGroup:viewImg']"
           >查看凭证</el-button>

           <el-button
             v-if="scope.row.status !='2'"
             size="mini"
             type="text"
             icon="el-icon-del"
             @click="handleDel(scope.row)"
             v-hasPermi="['job:attendanceGroup:delImg']"
           >删除</el-button>

         </template>
       </el-table-column>
    </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />


    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="block">
        <span class="demonstration">查看凭证：</span>
        <el-image  :src="imgSrc" lazy>

          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline">loading...</i>
          </div>
        </el-image>

      </div>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
    </el-dialog>


  </div>
</template>

<script>
import {getImgList,delImg} from "@/api/job/attendance/attendanceApi";
import { getToken } from "@/utils/auth";

export default {
  name: "attendanceStatisticsImg",
  created() {
    this.getList();

  },

  data() {
    return {

      dialogVisible:false,
      signUpLoading: true,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      imgList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      signUp: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: this.$route.query.id,
      },
      imgSrc:'',
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
    };
  },
      methods: {

        /** 获取凭证列表 */
        getList() {
          this.loading = true;
          getImgList(this.addDateRange(this.queryParams, this.dateRange)).then(
            response => {
              this.imgList = response.rows;
              this.total = response.total;
              this.loading = false;
            }
          );
        },
        dateFormatter (row, column) {
          let datetime = row.workTime;
          if(datetime){
            datetime = new Date(datetime);
            let y = datetime.getFullYear() + '-';
            let mon = datetime.getMonth()+1 + '-';
            let d = datetime.getDate();
            return y + mon + d;
          }
          return ''
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
          this.dateRange = [];
          this.resetForm("queryForm");
          this.handleQuery();
        },
        /** 删除按钮操作 */
        handleDel (row) {
          const id = row.id || this.ids
          this.$confirm('是否确认删除编号为"' + id + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delImg(id);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(() => {});
        },

        handOpenImage(row) {
          this.dialogVisible = true;
          this.imgSrc=row.url;

        },

      }
};
</script>
